<template>
  <div>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="$store.state.loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column type="index"> </el-table-column>
      <el-table-column sortable prop="name" label="产品名称" width="150">
      </el-table-column>
      <el-table-column sortable prop="cateName" label="品类" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="selectProduct(scope.$index, scope.row)"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :data="formInline" @onPagePaging="search"></Pagination>
  </div>
</template>

<script>
import { CategoryList, ProductList } from "../../api/productApi";
import Pagination from "../../components/Pagination";
export default {
  name: "ProductSelector",
  data() {
    return {
      loading: false, //是显示加载
      categories: [],
      // rules表单验证
      rules: {},
      showUpload: false,
      formInline: {
        page: 1,
        size: 10,
        total: 10,
      },
      listData: [],
    };
  },
  components: {
    Pagination,
  },
  created() {
    this.getdata(this.formInline);
  },
  methods: {
    getdata(parameter) {
      CategoryList(parameter).then((res) => {
        this.categories = res;
        let cateMap = {};
        this.categories.forEach((c) => {
          cateMap[c.id] = c.name;
        });

        ProductList(parameter).then((res) => {
          res.data.forEach((p) => {
            p.cateName = cateMap[p.category];
          });

          this.listData = res.data;
          this.formInline.total = res.total;
        });
      });
    },
    search() {
      this.getdata(this.formInline);
    },
    selectProduct(index, row) {
      this.$emit("productSelected", row);
    },
  },
};
</script>